import 'package:flutter/material.dart';
import 'package:flutter_app/components/layout.dart';

class DoublePage extends StatefulWidget {
  @override
  _DoublePageState createState() => _DoublePageState();
}
Widget HeadText(String text){
  return Text(text,style: TextStyle(color:Color(0xFF3A4064),fontSize: 17,fontWeight: FontWeight.w600,fontStyle: FontStyle.italic),);
}
class Category {
  String icon;
  String title;
  String subTitle;
  Category({this.icon, this.title, this.subTitle});
}
class CoinItem{
  String icon;
  String name;
  String url;
  CoinItem({this.icon,this.name,this.url});
}
List<CoinItem> Coins=[
  CoinItem(icon:'',name:'BTC双币',url:'/double/list'),
  CoinItem(icon:'',name:'ETH双币',url:'/double/list'),
  CoinItem(icon:'',name:'BCH双币',url:'/double/list'),
  CoinItem(icon:'',name:'BTC-U双币',url:'/double/list'),
  CoinItem(icon:'',name:'ETH-U双币',url:'/double/list'),
  CoinItem(icon:'',name:'BCH-U双币',url:'/double/list'),
];
List<Category> Categorys = [
  Category(icon: '', title: 'BTC双币', subTitle: '投入BTC,赚取稳健高收益USDC或BTC'),
  Category(icon: '', title: 'ETH双币', subTitle: '投入ETH,赚取稳健高收益USDC或ETH'),
  Category(icon: '', title: 'BCH双币', subTitle: '投入BCH,赚取稳健高收益USDC或BCH'),
  Category(icon: '', title: 'BTC-U双币', subTitle: '投入USDC,赚取稳健高收益USDC或BTC'),
  Category(icon: '', title: 'ETH-U双币', subTitle: '投入USDC,赚取稳健高收益USDC或ETH'),
  Category(icon: '', title: 'BCH-U双币', subTitle: '投入USDC,赚取稳健高收益USDC或BCH'),
];
List<Widget> getCoins(context){
  return Coins.map((item){
    return GestureDetector(
      onTap: ()=>Navigator.pushNamed(context, item.url),
      child: Column(
        children: [
          Container(
            width: 40,
            height:40,
            color: Colors.blueGrey,
          ),
          SizedBox(
            height:10
          ),
          Text(item.name,style:TextStyle(fontSize: 12))
        ],
      ),
    );
  }).toList();
}
class _DoublePageState extends State<DoublePage> {
  @override
  Widget build(BuildContext context) {
    List<Widget> getCategoryList() {
      return Categorys.map((item) {
        return GestureDetector(
          onTap: () => Navigator.pushNamed(context, '/double/list'),
          child: Container(
            decoration: BoxDecoration(
                color: Colors.blueGrey.withOpacity(0.03),
                borderRadius: BorderRadius.circular(5),
                border: Border.all(color: Colors.grey, width: 0.5)),
            margin: EdgeInsets.only(bottom: 10.0),
            padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
            child: Row(
              children: [
                Expanded(
                  child: ColumnStart(children: [
                    Text(
                      item.title,
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.w500),
                    ),
                    SizedBox(height: 5),
                    Text(
                      item.subTitle,
                      style: TextStyle(fontSize: 12, color: Colors.grey),
                    )
                  ]),
                ),
                Icon(
                  Icons.arrow_forward_ios_outlined,
                  size: 14,
                  color: Colors.grey,
                )
              ],
            ),
          ),
        );
      }).toList();
    }
    return Scaffold(
      appBar: DarkHeadBar(''),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15.0),
              child: Column(
                children: [
                  Container(
                    width:MediaQuery.of(context).size.width,
                    child: GridView.count(
                      shrinkWrap:true,
                      childAspectRatio:1.5,
                      crossAxisCount: 3,
                      mainAxisSpacing:15,
                      padding: EdgeInsets.symmetric(vertical: 0),
                      children: getCoins(context),
                    ),
                    padding:
                    EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(5),
                        boxShadow: [
                          BoxShadow(
                              blurRadius: 2.0,
                              spreadRadius: 1.0,
                              color: Colors.black.withOpacity(0.09),
                              offset: Offset(1.0, 1.0))
                        ]),
                  ),
                  SizedBox(
                    height: 15,
                  ),
                  Container(
                    width:MediaQuery.of(context).size.width,
                    child: Column(
                      children: [
                        Center(child: HeadText('了解双币投资')),
                        SizedBox(
                          height: 10,
                        ),
                        Stack(
                          children: [
                            Container(
                              height: 120,
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                  image: AssetImage('assets/images/ic_thumbnail_dual_ccy_video.png'),
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                            Positioned(
                              top: 40,
                              left:140,
                              child: Container(
                                height: 50,
                                width: 50,
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage('assets/images/ic_video_action.png'),
                                    fit: BoxFit.contain,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                    padding:
                        EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(5),
                        boxShadow: [
                          BoxShadow(
                              blurRadius: 2.0,
                              spreadRadius: 1.0,
                              color: Colors.black.withOpacity(0.09),
                              offset: Offset(1.0, 1.0))
                        ]),
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  HeadText('产品优势'),
                  SizedBox(
                    height: 20,
                  ),
                  Wrap(
                    runSpacing: 20,
                    children: [
                      Text('多种投资方案，多种风险水平，根据自身的投资风格灵活配置'),
                      Text('借助传统金融成熟产品的收益策略，实现数字资产的高额收益'),
                      Text('完全透明的回款公式和收益规则，让您的投资更有信心。'),
                    ],
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  HeadText('选择合适的品类'),
                  SizedBox(
                    height: 20,
                  ),
                  Wrap(
                    children: getCategoryList(),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
